<template>
  <a-modal
    :title="title"
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭">

    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-form-item :labelCol="labelCol"
                     :wrapperCol="wrapperCol"
                     label="停车场编号"
                     v-show="false">
          <p  v-decorator="['parkCode',{}]"></p>
        </a-form-item>
        <a-form-item :labelCol="labelCol"
                     :wrapperCol="wrapperCol"
                     label="停车场名称"
                     v-show="false">
          <p  v-decorator="['parkName',{}]"></p>
        </a-form-item>

        <a-form-item :labelCol="labelCol"
                     :wrapperCol="wrapperCol"
                     label="停车场选择"
                     v-if="parkSelectIsUse===true"
        >
          <a-select  label-in-value :options="ParkOptions"  v-decorator="['park',{}]" @change="ParkSelect"></a-select>
        </a-form-item>

        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="车辆类型名称">
          <a-input placeholder="请输入车辆类型名称" v-decorator="['carTypeName', {}]"/>
        </a-form-item>

        <a-form-item :labelCol="labelCol"
                     :wrapperCol="wrapperCol"
                     label="默认名称">
          <a-input  v-decorator="['defaultName',{}]"></a-input>
        </a-form-item>

        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="是否启用">
          <a-select v-decorator="['isOpen', {}]" placeholder="请选择是否启用">
            <a-select-option key="0" value="0">不启用</a-select-option>
            <a-select-option key="1" value="1">启用</a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="车辆类型">
          <a-select v-decorator="['carType', {}]" placeholder="请选择车辆类型">
            <a-select-option key="0" value="0">临时车</a-select-option>
            <a-select-option key="1" value="1">月租车</a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item :labelCol="{ xs: {span: 24}, sm: {span: 5}, }" :wrapperCol="{xs: {span: 24},sm: {span: 19},}" label="对应设备车辆类型">
          <a-checkbox-group v-decorator="['carTypeNo',{}]">
            <a-row>
            <a-checkbox :value="0" style="margin-right: 14px">未知车辆</a-checkbox>
            <a-checkbox :value="3" style="margin-right: 14px">单排黄牌</a-checkbox>
            <a-checkbox :value="5" style="margin-right: 56px">警车车牌</a-checkbox>
            <a-checkbox :value="10">使馆车牌</a-checkbox>
            </a-row>
            <a-row>
            <a-checkbox :value="13" style="margin-right: 14px">教练车牌</a-checkbox>
            <a-checkbox :value="4" style="margin-right: 14px">双排车牌</a-checkbox>
            <a-checkbox :value="6" style="margin-right: 56px">武警车牌</a-checkbox>
            <a-checkbox :value="8">单排军车牌</a-checkbox>
            </a-row>
            <a-row>
            <a-checkbox :value="12" style="margin-right: 14px">农用车牌</a-checkbox>
            <a-checkbox :value="1">蓝牌小汽车</a-checkbox>
            <a-checkbox :value="15" style="margin-right: 28px">双层武警车牌</a-checkbox>
            <a-checkbox :value="9">双排军车牌</a-checkbox>
            </a-row>
            <a-row>
            <a-checkbox :value="18" style="margin-right: 14px">民航车牌</a-checkbox>
            <a-checkbox :value="2">黑牌小汽车</a-checkbox>
            <a-checkbox :value="16" style="margin-right: 28px">武警总队车牌</a-checkbox>
            <a-checkbox :value="14">澳门进出中国大陆车牌</a-checkbox>
            </a-row>
            <a-row>
            <a-checkbox :value="19">新能源车牌</a-checkbox>
            <a-checkbox :value="7">个性化车牌</a-checkbox>
            <a-checkbox :value="17">双层武警总队车牌</a-checkbox>
            <a-checkbox :value="11">香港进出中国大陆车牌</a-checkbox>
            </a-row>
          </a-checkbox-group>
        </a-form-item>
        <a-form-item>
          <p v-decorator="['updateTime',{}]"></p>
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import {httpAction, postAction} from '@/api/manage'
import pick from 'lodash.pick'
import moment from "moment"


export default {
  name: "ConfigCarTypeModal",
  data() {
    return {
      title: "操作",
      visible: false,
      carTypeNo: '',
      labelCol: {
        xs: {span: 24},
        sm: {span: 5},
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 16},
      },
      confirmLoading: false,
      model: {},
      form: this.$form.createForm(this),
      validatorRules: {},
      url: {
        add: "/ConfigCarType/configCarType/add",
        edit: "/ConfigCarType/configCarType/edit",
        ParkList:'/parking/parkInfo/list',
      },
      carTypeNoOptions: [
        {value: 0, label: '未知车牌'},
        {value: 1, label: '蓝牌小汽车'},
        {value: 2, label: '黑牌小汽车'},
        {value: 3, label: '单排黄牌'},
        {value: 4, label: '双排黄牌'},
        {value: 5, label: '警车车牌'},
        {value: 6, label: '武警车牌'},
        {value: 7, label: '个性化车牌'},
        {value: 8, label: '单排军车牌'},
        {value: 9, label: '双排军车牌'},
        {value: 10, label: '使馆车牌'},
        {value: 11, label: '香港进出中国大陆车牌'},
        {value: 12, label: '农用车牌 '},
        {value: 13, label: '教练车牌'},
        {value: 14, label: '澳门进出中国大陆车牌'},
        {value: 15, label: '双层武警车牌'},
        {value: 16, label: '武警总队车牌'},
        {value: 17, label: '双层武警总队车牌'},
        {value: 18, label: '民航车牌'},
        {value: 19, label: '新能源车牌'},



      ],
      ParkOptions:[],
      parkSelectIsUse:false
    }
  },
  methods: {
    async add() {
     await this.getParkData()
      this.edit({});
     this.parkSelectIsUse = true
    },
    edit(record) {
      this.form.resetFields()
      this.visible =true
      this.model = Object.assign({}, record);
      if(this.model.carTypeNo)
      {
      var String = this.model.carTypeNo.split(',')
      var CarTypeNoArray = []
      String.forEach((carTypeNo) => {
        CarTypeNoArray.push(Number(carTypeNo))
      })
      this.model.carTypeNo = CarTypeNoArray
      }
      this.$nextTick(() => {
        this.form.setFieldsValue(pick(this.model, 'parkCode', 'parkName', 'defaultName', 'carType', 'carTypeName', 'isOpen', 'carTypeNo'))
        /*this.form.setFieldsValue(pick(this.model, 'parkCode', 'parkName', 'carTypeName', 'defaultName', 'carType', 'isOpen', 'createUser'))*/
        //时间格式化
        this.form.setFieldsValue({updateTime: this.model.updateTime ? moment(this.model.updateTime) : null})

      });
    },
    close() {
      this.$emit('close');
      this.visible = false;
    },
    handleOk() {
      const that = this;
      // 触发表单验证
      this.form.validateFields((err, values) => {
        let carTypeNo = ''
        values.carTypeNo.forEach((car) => {
          if (carTypeNo === '') {
            carTypeNo = car
          } else {
            carTypeNo = carTypeNo + ',' + car
          }
        })
        values.carTypeNo = carTypeNo
        if (!err) {
          that.confirmLoading = true;
          let httpurl = '';
          let method = '';
          if (!this.model.id) {
            httpurl += this.url.add;
            method = 'post';
          } else {
            httpurl += this.url.edit;
            method = 'put';
          }
          let formData = Object.assign(this.model, values);
          //时间格式化
          formData.updateTime = formData.updateTime ? formData.updateTime.format('YYYY-MM-DD HH:mm:ss') : null;
          httpAction(httpurl, formData, method).then((res) => {
            if (res.success) {
              that.$message.success(res.message);
              that.$emit('ok');
            } else {
              if (res.message === '车辆类型重复设置') {
                console.log(res)
                var WarningMessage = ''
                res.result.forEach((message) => {
                  WarningMessage = WarningMessage + message.ReturnMessage + that.carTypeNoOptions[Number(message.CarType)].label + '\n'
                })
                that.$message.warning(WarningMessage);
              } else {
                that.$message.warning(res.message);
              }

            }
          }).finally(() => {
            that.confirmLoading = false;
            that.handleCancel();
          })


        }
      })
    },
    handleCancel() {
      this.parkSelectIsUse= false
      this.close()
    },


    ParkSelect(value){
      this.form.setFieldsValue({parkCode:value.key})
      this.form.setFieldsValue({parkName:value.label})
    },
    getParkData(){
      var Params = {}
      const that = this
      that.confirmLoading = true
      httpAction(that.url.ParkList,Params,"get").then((res)=>{
        if(res.success)
        {
          if(that.ParkOptions.length>0)
          {
            that.ParkOptions = []
          }
          res.result.records.forEach((park)=>{
            that.ParkOptions.push({
              value: park.parkCode,
              key:park.parkCode,
              label: park.parkName
            })
          })
          that.ParkSelect(that.ParkOptions[0])
          that.form.setFieldsValue({park:that.ParkOptions[0]})
          that.confirmLoading = false
          }
      })
    },

  }
}
</script>

<style lang="less" scoped>
/deep/ .ant-checkbox-wrapper.ant-checkbox-group-item {
  margin-right: 0px;
  width: 25%;
}
</style>